<!--
@Descripttion 输入框
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FInput from '@/components/form/f-input'
  注册组件
    components: {
      FInput
    }
  使用
    <FInput v-model.trim="xxx" />
    <FInput v-model.trim="xxx" :password="false" :maxlength="50" width="220px" icon="" :disabled="false" placeholder="请输入" append="" :autofocus="false" />
    password    Boolean 默认值(false) 是否是密码框
    maxlength   Number  默认值(50)    可输入长度
    width       String  默认值(220px) 输入框宽度
    icon        String  默认值(无)    输入框图片
    disabled    Boolean 默认值(false) 是否失效
    placeholder String  默认值(请输入) 默认占位文本
    append      String  默认值(无)    尾部追加的文字
    autofocus   Boolean 默认值(false) 是否默认聚焦
 -->
<template>
  <el-input
    :value="value"
    @input="changeVal"
    :show-password="password"
    clearable
    :maxlength="maxlength"
    :style="`width: ${width}`"
    :prefix-icon="icon"
    :disabled="disabled"
    :placeholder="placeholder"
    :autofocus="autofocus"
  >
    <template v-if="append" slot="append">{{append}}</template>
  </el-input>
</template>

<script>
export default {
  name: 'f-input',
  props: {
    value: {
      required: true
    },
    // 是否是密码框
    password: {
      type: Boolean,
      default: false
    },
    // 可输入长度
    maxlength: {
      type: Number,
      default: 50
    },
    // 输入框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 输入框图片
    icon: {
      type: String,
      default: ''
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please enter')
      }
    },
    // 尾部追加的文字
    append: {
      type: String,
      default: ''
    },
    // 是否默认聚焦
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
    }
  }
}
</script>
